<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="昵称" prop="nick" align="center" />
    <el-table-column label="用户名" prop="user" align="center" />
    <el-table-column label="密码" prop="pwd" align="center" />
    <el-table-column label="性别" prop="sex" align="center" />
    <el-table-column label="年龄" prop="age" align="center" />
    <el-table-column label="邮箱" prop="email" align="center" />
    <el-table-column label="电话" prop="phone" align="center" />
    <el-table-column
      label="座右铭"
      prop="motto"
      align="center"
      show-overflow-tooltip
    />
    <el-table-column
      label="个性签名"
      prop="signature"
      align="center"
      show-overflow-tooltip
    />
    <el-table-column
      label="个人简介"
      prop="synopsis"
      align="center"
      show-overflow-tooltip
    />
    <el-table-column label="头像" prop="avatar" align="center">
      <template #default="scope">
        <div class="photo">
          <img :src="scope.row.avatar" alt="" srcset="" />
        </div>
      </template>
    </el-table-column>
    <el-table-column label="首页背景图" prop="homeBgUrl" align="center">
      <template #default="scope">
        <div class="photo">
          <img :src="scope.row.homeBgUrl" alt="" srcset="" />
        </div>
      </template>
    </el-table-column>
    <el-table-column label="日记背景图" prop="diaryUrl" align="center">
      <template #default="scope">
        <div class="photo">
          <img :src="scope.row.diaryUrl" alt="" srcset="" />
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogVisible" title="更新个人信息">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="昵称：" prop="nick">
        <el-input v-model="ruleForm.nick" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="用户名：" prop="user">
        <el-input v-model="ruleForm.user" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码：" prop="pwd">
        <el-input v-model="ruleForm.pwd" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-input v-model="ruleForm.sex" placeholder="请输入sex" />
      </el-form-item>
      <el-form-item label="年龄：" prop="age">
        <el-input v-model="ruleForm.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item label="邮箱：" prop="email">
        <el-input v-model="ruleForm.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="电话：" prop="phone">
        <el-input v-model="ruleForm.phone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item label="座右铭：" prop="motto">
        <el-input
          v-model="ruleForm.motto"
          :rows="2"
          type="textarea"
          placeholder="请输入座右铭"
        />
      </el-form-item>
      <el-form-item label="人性签名：" prop="signature">
        <el-input
          v-model="ruleForm.signature"
          :rows="4"
          type="textarea"
          placeholder="请输入个人签名"
        />
      </el-form-item>
      <el-form-item label="个人简介：" prop="synopsis">
        <el-input
          v-model="ruleForm.synopsis"
          :rows="4"
          type="textarea"
          placeholder="请输入个人简介"
        />
      </el-form-item>
      <el-form-item label="头像：" prop="avatar">
        <el-upload
          class="avatar-uploader"
          action=""
          :http-request="avatarUpload"
          :show-file-list="false"
          :limit="1"
          :before-upload="beforeUpload"
        >
          <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="首页背景图：" prop="homeBgUrl">
        <el-upload
          class="avatar-uploader"
          action=""
          :http-request="homeBgUpload"
          :show-file-list="false"
          :limit="1"
          :before-upload="beforeUpload"
        >
          <img
            v-if="ruleForm.homeBgUrl"
            :src="ruleForm.homeBgUrl"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="日记背景图：" prop="diaryUrl">
        <el-upload
          class="avatar-uploader"
          action=""
          :http-request="diaryBgUpload"
          :show-file-list="false"
          :limit="1"
          :before-upload="beforeUpload"
        >
          <img
            v-if="ruleForm.diaryUrl"
            :src="ruleForm.diaryUrl"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateSubmitForm(ruleFormRef)">更新</el-button>
        <el-button type="primary" @click="closeForm">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import gerGlobalInfo from "@/hooks/glogal.js";
import { User } from "@/api/type";
import type { UploadProps } from "element-plus";
import {
  getUserInfo,
  uploadAvatarImg,
  uploadHomeBgImg,
  uploadDiaryBgImg,
  updateUserInfo,
} from "@/api/index";

const tableData = ref([]);
const dialogVisible = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  id: undefined,
  nick: "",
  user: "",
  pwd: "",
  sex: "",
  age: 0,
  email: "",
  phone: 0,
  motto: "",
  signature: "",
  synopsis: "",
  avatar: "",
  homeBgUrl: "",
  diaryUrl: "",
} as User);
const rules = reactive({
  user: [
    {
      required: true,
      message: "请输入昵称",
      trigger: "change",
    },
  ],
  pwd: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change",
    },
  ],
});
const imageUrl = gerGlobalInfo().$imageUrl;

const initUserInfo = async () => {
  const res = await getUserInfo();
  if (res) {
    tableData.value = res;
  }
};
// 限制上传大小
const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("上传图片大小不能超过2MB!");
    return false;
  }
  return true;
};
// 上传头像
const avatarUpload = async (params: any) => {
  const fd = new FormData();
  fd.append("file", params.file);
  const res = await uploadAvatarImg(fd);
  if (res) {
    let path = res.data.path;
    ruleForm.avatar = imageUrl + path.replace(/public\//g, "");
  }
};
// 上传首页背景
const homeBgUpload = async (params: any) => {
  const fd = new FormData();
  fd.append("file", params.file);
  const res = await uploadHomeBgImg(fd);
  if (res) {
    let path = res.data.path;
    ruleForm.homeBgUrl = imageUrl + path.replace(/public\//g, "");
  }
};
// 上传日记背景图
const diaryBgUpload = async (params: any) => {
  const fd = new FormData();
  fd.append("file", params.file);
  const res = await uploadDiaryBgImg(fd);
  if (res) {
    let path = res.data.path;
    ruleForm.diaryUrl = imageUrl + path.replace(/public\//g, "");
  }
};
// 关闭对话框
const closeForm = () => {
  dialogVisible.value = false;
};
const handleEdit = (index: number, row) => {
  dialogVisible.value = true;
  ruleForm.id = row.id;
  ruleForm.nick = row.nick;
  ruleForm.user = row.user;
  ruleForm.pwd = row.pwd;
  ruleForm.sex = row.sex;
  ruleForm.age = row.age;
  ruleForm.email = row.email;
  ruleForm.phone = row.phone;
  ruleForm.motto = row.motto;
  ruleForm.signature = row.signature;
  ruleForm.synopsis = row.synopsis;
  ruleForm.avatar = row.avatar;
  ruleForm.homeBgUrl = row.homeBgUrl;
  ruleForm.diaryUrl = row.diaryUrl;
};
// 更新数据
const updateSubmitForm = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await updateUserInfo(ruleForm);
      if (res.code === 200) {
        ElMessage.success(res.msg);
        dialogVisible.value = false;
        initUserInfo();
      } else {
        ElMessage.error(res.msg);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
onMounted(() => {
  initUserInfo();
});
</script>

<style lang="scss" scoped>
.photo {
  height: 60px;
  img {
    width: 100%;
  }
}
</style>
